<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html ng-app="LeaderboardApp">
<head>
<meta charset="UTF-8">
<title>Consulta de Progreso de mis Metas</title>
<link href="/Leaderboard/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/select2.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/select2-bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/Leaderboard/css/styles.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/respond.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/bootstrap/bootstrap.min.js"></script>

<!--[if lt IE 9]><script type="text/javascript" src="/Leaderboard/js/lib/angularjs/html5shiv-printshiv.min.js"></script><![endif]-->
<!--[if lt IE 8]><script type="text/javascript" src="/Leaderboard/js/lib/angularjs/json3.min.js"></script><![endif]-->

<script type="text/javascript" src="/Leaderboard/js/lib/select2.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/lib/angularjs/angularjs-1.2.16.min.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.init.js"></script>
<script type="text/javascript" src="/Leaderboard/js/controllers.admin.js"></script>
<script type="text/javascript"src="/Leaderboard/js/controllers.progresos.js"></script>

<!--[if lte IE 8]>
<script type="text/javascript">
    $(document).ready(function() {
        angular.bootstrap(document);
    });
</script>
<![endif]-->
</head>
<body>
	<div ng-include="'/Leaderboard/include/header.html'"></div>
	
	<div class="container">
		<div ng-include="'/Leaderboard/include/changePassword.html'"></div>
		
		<div ng-controller="progresosCtrl" ng-init="getMesesProgresos();">
			<div ng-include="'/Leaderboard/include/messages.html'"></div>
			
			<div class="panel panel-primary">
				<div class="panel-heading"><h3 class="panel-title">Consulta de Progreso de mis Metas</h3></div>
				<div class="panel-body panel-body-scrollable">
					
					<div class="span12 centered-pills">
						<ul class="nav nav-pills">
							<li ng-class="classForMes(mes)" ng-repeat="mes in mesesProgresos"><a ng-click="setCurrentMes(mes); getProgresosCurrentUsuario();" href="javascript:void(0);">{{mes.label}}</a></li>
						</ul>
					</div>
				
					<table id="tblProgresosUsuario" class="table table-condensed table-bordered" ng-table="tableParams">
						<thead><tr><th>Sucursal</th><th>Mes</th><th>Meta</th><th>Progreso</th><th>Ponderaci&oacute;n</th><th>Nota</th><th>Ult. Actualizaci&oacute;n</th><th>Acciones</th></tr></thead>
						<tbody>
							<tr ng-repeat="progreso in progresosUsuario | filter:filterText">
								<td>{{progreso.meta.branch}}</td><td>{{progreso.fecha}}</td><td ng-show="progreso.meta.isEval">{{progreso.meta.metaName}}</td><td ng-hide="progreso.meta.isEval">{{progreso.meta.metaName}} - {{progreso.meta.type}} &gt;= {{progreso.meta.value}}</td>
									<td>
										<div class="progress progress-usuario">
										  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{{progreso.valor}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progreso.valor}}%">
										    <span class="sr-only">{{progreso.valor}}% Complete</span>
										    <span class="shadow-text">{{progreso.valor}}%</span>
										  </div>
										</div>
									</td>
									<td>{{progreso.meta.weight}} %</td>
									<td>{{progreso.ranking}}</td>
									<td>{{progreso.ultAct}}</td>
									<td>
										<a class="link float-left" href="javascript:void(0);" ng-click="getDetalleProgreso(progreso)" ng-hide="progreso.meta.isEval">Ver detalle</a>
									</td>
							</tr>
							<tr class="info"><td colspan="3"><h4>Progreso total</h4></td>
							<td>
								<div class="progress progress-usuario progress-total">
								  <div class="progress-bar" role="progressbar" aria-valuenow="{{avgProgresoMetasUsr}}" aria-valuemin="0" aria-valuemax="100" style="width: {{avgProgresoMetasUsr}}%">
								    <span class="sr-only">{{avgProgresoMetasUsr}} % Complete</span>
								    <span class="shadow-text">{{avgProgresoMetasUsr}}%</span>
								  </div>
								</div>
							</td>
							<td><h4>{{sumPonderacionMetasUsr}} %</h4></td><td><h4>{{avgNotasUsr}}</h4></td>
							<td>&nbsp;</td><td>&nbsp;</td></tr>
						</tbody>
					</table>
				</div>
				<div class="panel-footer">
					<input id="usrSearch" name="usrSearch" class="form-control search-box" ng-model="filterText" />
					<button type="button" class="btn btn-default" ng-click="getProgresosUsuario()">Refrescar</button>
				</div>
			</div>
			
			<div class="modal fade" id="dlgDetalleProgresoMeta" role="dialog" aria-labelledby="dlgDetalleProgresoMeta" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<form id="frmDetalleProgresoMeta" name="frmDetalleProgresoMeta" class="form-horizontal" role="form">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">Detalle del Progreso de la Meta</h4>
							</div>
							<div class="modal-body">
								<div ng-include="'/Leaderboard/include/modalMessages.html'"></div>
								<div class="form-group">
									<label for="lblTipo" class="col-sm-4 control-label">Tipo</label>
									<div class="col-sm-8">
										<p class="form-control-static" id="lblTipo">{{currentProgreso.meta.type}}</p>
									</div>
								</div>
								<div class="form-group">
									<label for="lblValor" class="col-sm-4 control-label">Meta</label>
									<div class="col-sm-8">
										<p class="form-control-static" id="lblValor">{{currentProgreso.meta.value}}</p>
									</div>
								</div>
								<div class="form-group">
									<label for="lblPonderacion" class="col-sm-4 control-label">Ponderaci&oacute;n</label>
									<div class="col-sm-8">
										<p class="form-control-static" id="lblPonderacion">{{currentProgreso.meta.weight}} %</p>
									</div>
								</div>
								<div class="form-group">
									<label for="lblPonderacion" class="col-sm-4 control-label">Progreso</label>
									<div class="col-sm-8">
										<p class="form-control-static" id="lblPonderacion">{{currentProgreso.valor}} %</p>
									</div>
								</div>
								<div class="form-group">
									<label for="tblProductos" class="col-sm-4 control-label">Productos</label>
									<div class="col-sm-8">
										<table id="tblProductos" class="table table-striped table-condensed table-bordered" ng-table="tableParams">
											<thead><tr><th>Nombre</th><th>Total ventas</th></tr></thead>
											<tbody>
												<tr ng-repeat="prd in ventasMeta">
													<td>{{prd.gPrdNombre}}</td><td>{{prd.totalVentas}}</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>